<template>
  <div>
    <base-dialog :closeEscape="true" :showClose="true" :closeModal="false" :dialogVisible.sync="choiceDialog" @handleClose="handleClose"
	   title="更多查询" :footerShow="true" width="45%" top="10vh" @handleConfirmClick="handleConfirmClick" @handleReset="handleReset" :resetButton="true">
		<div style="padding:5px 5px 5px 8px;background-color:#F7F7F7;display: flex;flex-wrap: wrap;"  ref="serchRefs">
				<div v-for="(row, indexRow) in searchList" class="searchBox" :key="indexRow" style="margin: 5px ">
					<el-input v-model="ruleForm[row.columnNameEN]" clearable :type="row.type ? row.type : 'text'"
						style="width: 100%;" :placeholder="!row.columnNameCN ? '请输入' : row.columnNameCN"
						v-if="row.tag === 'elInput'" min="1">
					</el-input>
					<el-date-picker v-model="ruleForm[row.columnNameEN]" v-if="row.tag === 'elDatePicker'"
						:class="{ one: row.type ? 'date' : row.type }" style="width: 100%;"
						:value-format="!row.valueFormat ? 'yyyy-MM-dd' : row.valueFormat" range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期" :type="!row.type ? 'date' : row.type"
						:placeholder="!row.columnNameCN ? '请选择' : row.columnNameCN">
					</el-date-picker>
					<el-radio-group v-model="ruleForm[row.columnNameEN]" v-if="row.tag === 'elRadio'">
						<el-radio-button v-for="el in row.options" :label="el.value" :key="el.value">{{ el.label }}
						</el-radio-button>
					</el-radio-group>
					<div v-if="row.tag === 'elDialog'" class="elDialog" style="cursor: pointer;height:32px;ine-height:32px">
						<p :style="{ color: ruleForm[row.columnNameEN] ? '#000' : '#c0c4cc' }" style="width: 100%;margin:0"
							@click="elDialogClick(row, index, indexRow)">
							{{ ruleForm[row.columnNameEN] ? ruleForm[row.columnNameEN] : row.columnNameCN ? row.columnNameCN : '请点击选择' }}
						</p>
						<i class="el-icon-more" @click="elDialogClick(row, index, indexRow)"
							v-if="!row.disabled && !ruleForm[row.columnNameEN]"></i>
						<i class="el-icon-circle-close" v-if="!row.disabled && ruleForm[row.columnNameEN]"
							@click="elDialogClear(row)" style="margin-left: 10px;"></i>
					</div>
					<el-select v-model="ruleForm[row.columnNameEN]" filterable style="width:100%"
						@change="selectChange($event, index, indexRow)" :clearable="row.clearable ? row.clearable : true"
						:placeholder="!row.columnNameCN ? '请选择' : row.columnNameCN" v-if="row.tag === 'elSelect'">
						<el-option v-for="(el, elIndex) in row.options"
							:key="!row.optionValue ? el['value'] : el[row.optionValue]"
							:label="!row.optionLabel ? el['label'] : el[row.optionLabel]"
							:value="!row.optionValue ? el['value'] : el[row.optionValue]">
						</el-option>
					</el-select>
				</div>
				<!-- 搜索按钮 -->
				<!-- <el-button circle size="small" icon="el-icon-search searchIcon" class="searchIcon" @click="search" title="搜索">
				</el-button>
				<el-button circle size="small" icon="el-icon-refresh searchIcon" class="searchIcon" @click="refresh" title="重置">
				</el-button> -->
		</div>
    </base-dialog>
  </div>

</template>

<script>
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
export default {
  data () {
    return {
      choiceDialog: false,
	  ruleForm: {},
    }
  },

  props: {
    searchList: {
		type: Array,
		default: () => {
			return []
		}
	},
  },

  components: {
    baseDialog
  },

  computed: {},

  methods: {
    handleConfirmClick() {
		this.$emit('queryData',this.ruleForm)
	},
	handleReset() {
		this.ruleForm = Object.assign({}, '')
	},
	handleClose() {
		this.ruleForm = Object.assign({})
	}
  }
}

</script>
<style  scoped lang='scss'>
.searchBox {
	width: 24%;
}
</style>